﻿<!DOCTYPE html>
<html>
<head>
    <title id="Description">This demo shows how to create a timer notification. It also
        showcases a variety of notification templates.</title>
    <meta name="keywords" content="functionality, jQuery notification, jQWidgets, jqxNotification, notification, timer, template, unobtrusive notification" />
    <meta name="description" content="This demo shows how to create a timer notification. It also showcases a variety of notification templates." />
    <link type="text/css" rel="Stylesheet" href="../../jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnotification.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/jscript">
        $(document).ready(function () {
            var notificationWidth = 300;
            $("#timerNotification").jqxNotification({ width: notificationWidth, position: "top-right", autoOpen: true, closeOnClick: false, autoClose: false, showCloseButton: false, template: "time" });
            $("#timeOutNotification").jqxNotification({ width: notificationWidth, position: "top-right", autoOpen: false, closeOnClick: true, autoClose: false, template: "time" });
            $("#correctNotification").jqxNotification({ width: notificationWidth, position: "top-right", autoOpen: false, closeOnClick: true, autoClose: true, template: "success" });
            $("#wrongNotification").jqxNotification({ width: notificationWidth, position: "top-right", autoOpen: false, closeOnClick: true, autoClose: true, template: "error" });
            $("#errorTimeOutNotification").jqxNotification({ width: notificationWidth, position: "top-right", autoOpen: false, closeOnClick: true, autoClose: true, template: "error" });

            $("#answerInput").jqxInput({ width: 50, height: 25 });
            $("#submitAnswer").jqxButton();

            // bind to the close event
            $("#timerNotification").on("close", function () {
                if ($("#answerInput").val() != 8) {
                    $("#timeOutNotification").jqxNotification("open");
                }
            });

            $("#submitAnswer").click(function () {
                if (seconds > 1) {
                    if ($("#answerInput").val() == 8) {
                        $("#correctNotification").jqxNotification("open");
                        clearInterval(interval);
                        $("#timerNotification").jqxNotification("closeLast");
                    } else {
                        $("#wrongNotification").jqxNotification("open");
                    }
                } else {
                    $("#errorTimeOutNotification").jqxNotification("open");
                }
            });

            var seconds = 30;

            var interval = setInterval(function () {
                if (seconds > 1) {
                    seconds--;
                    $(".timer").text(seconds);
                } else {
                    clearInterval(interval);
                    $("#timerNotification").jqxNotification("closeLast");
                }
            }, 1000);
        });
    </script>
</head>
<body>
    <!--Notifications-->
    <div id="timerNotification">
        <div>
            Hurry, you have <span class="timer">30</span> seconds left!
        </div>
    </div>
    <div id="timeOutNotification">
        <div>Time is up!</div>
    </div>
    <div id="correctNotification">
        <div>Your answer is correct.</div>
    </div>
    <div id="wrongNotification">
        <div>Your answer is incorrect.</div>
    </div>
    <div id="errorTimeOutNotification">
        <div>Time is up!</div>
    </div>
    <!--Layout-->
    <div>
        Solve the equasion in 30 seconds:
    </div>
    <div>
        20 - 3 × 4 =
        <input id="answerInput" type="text" />
    </div>
    <br />
    <button id="submitAnswer">
        Submit answer</button>
</body>
</html>
